<html>
<head>
    <title>SPE: Emitter pooling</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<p class="numParticles">Click mouse or press any key to trigger an explosion.</p>

    <script type="text/javascript" src="./js/THREE-r84.js"></script>
    <script type="text/javascript" src="./js/Stats.min.js"></script>
    <script type="text/javascript" src="../build/SPE.min.js"></script>

	<script type="text/javascript">
		// variables used in init()
        var scene, camera, renderer, stats, stats2, clock;

        // Used in initParticles()
		var emitter, particleGroup, pool,
            pos = new THREE.Vector3(),
            emitterSettings = {
                type: SPE.distributions.SPHERE,
                position: {
                    spread: new THREE.Vector3(10),
                    radius: 1,
                },
                velocity: {
                    value: new THREE.Vector3( 100 )
                },
                size: {
                    value: [ 30, 0 ]
                },
                opacity: {
                    value: [1, 0]
                },
                color: {
                    value: [new THREE.Color('yellow'),new THREE.Color('red')]
                },
                particleCount: 100,
                alive: true,
                duration: 0.05,
                maxAge: {
                    value: 0.5
                }
            };

		// Setup the scene
        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);
            camera.position.z = 200;
            camera.lookAt( scene.position );

            var referenceCube = new THREE.Mesh(
                new THREE.BoxGeometry(300, 300, 300),
                new THREE.MeshBasicMaterial({
                    wireframe: true,
                    opacity: 0.1,
                    transparent: true,
                    color: 0xffffff
                })
            );
            scene.add( referenceCube );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor(0x000000);

            stats = new Stats();
            clock = new THREE.Clock();

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0';

            document.body.appendChild( renderer.domElement );
            document.body.appendChild( stats.domElement );
        }


        // Create particle group and emitter
        function initParticles() {
        	particleGroup = new SPE.Group({
        		texture: {
                    value: THREE.ImageUtils.loadTexture('./img/smokeparticle.png')
                },
                blending: THREE.AdditiveBlending
        	});

            particleGroup.addPool( 10, emitterSettings, false );

            // Add particle group to scene.
        	scene.add( particleGroup.mesh );
        }

        // Generate a random number between -size/2 and +size/2
        function rand( size ) {
            return size * Math.random() - (size/2);
        }

        // Trigger an explosion and random co-ords.
        function createExplosion() {
            var num = 150;
            particleGroup.triggerPoolEmitter( 1, (pos.set( rand(num), rand(num), rand(num) )) );
        }


        function animate() {
            requestAnimationFrame( animate );
            render( clock.getDelta() );
            stats.update();
        }

        function updateCamera() {
            var now = Date.now() * 0.0007;

            camera.position.set( Math.sin( now ) * 500, 0, Math.cos( now ) * 500 );
            camera.lookAt( scene.position );
        }

        function render( dt ) {
            particleGroup.tick( dt );
            updateCamera();
            renderer.render( scene, camera );
        }


        // Add a mousedown listener. When mouse is clicked, a new explosion will be created.
        document.addEventListener( 'mousedown', createExplosion, false );

        // Do the same for a keydown event
        document.addEventListener( 'keydown', createExplosion, false );


        // Resize listener...
        window.addEventListener( 'resize', function() {
        	var w = window.innerWidth,
        		h = window.innerHeight;

        	camera.aspect = w / h;
        	camera.updateProjectionMatrix();

        	renderer.setSize( w, h );
        }, false );


        // Kick it all off.
        init();
        initParticles();

        setTimeout(animate, 0);

	</script>

</body>
</html>
